<!-- 
 * @Author: guanpf 992093924@qq.om
 * @Date: 2023-06-29 17:18:54
 * @LastEditTime: 2023-10-22 21:22:39
 * @LastEditors: guanpf
 * @Description: 
 * @FilePath: /ZCGL_WX/src/views/main/asset/home.vue
 -->
<template>
  <div class="home">
    <div class="top">
      <div class="item-list">
        <div class="item" @click="goPage(1)">
          <div class="add-icon">
            <img src="@/assets/images/asset/registion.png" alt="" />
          </div>
          <div>资产登记</div>
        </div>
        <div class="item" @click="goPage(2)">
          <div class="return-icon">
            <img src="@/assets/images/asset/return.png" alt="" />
          </div>
          <div>资产归还</div>
        </div>
        <div class="item" @click="goPage(3)">
          <div class="lend-icon"><img src="@/assets/images/asset/lend.png" alt="" /></div>
          <div>资产借出</div>
        </div>
        <div class="item" @click="goPage(4)">
          <div class="transfer-icon">
            <img src="@/assets/images/asset/transfer.png" alt="" />
          </div>
          <div>资产转移</div>
        </div>
        <div class="item" @click="goPage(5)">
          <div class="receive-icon">
            <img src="@/assets/images/asset/receive.png" alt="" />
          </div>
          <div>资产接收</div>
          <span class="num" v-if="receiveNumber">{{ receiveNumber }}</span>
        </div>
        <div class="item" @click="goPage(6)">
          <div class="inventory-icon">
            <img src="@/assets/images/asset/inventory.png" alt="" />
          </div>
          <div>资产盘点</div>
        </div>
        <!-- <div class="item" @click="goPage(7)">
          <div class="receipt-icon">
            <img src="@/assets/images/asset/receipt.png" alt="" />
          </div>
          <div>借据单</div>
        </div> -->
        <div class="item" @click="scanCode">
          <div class="scan-icon">
            <img src="@/assets/images/asset/scan_code.png" alt="" />
          </div>
          <div>扫一扫</div>
        </div>
        <!-- <div class="item" @click="goPage(8)">
          <div class="statistics-icon">
            <img src="@/assets/images/asset/statistics.png" alt="" />
          </div>
          <div>统计</div>
        </div> -->
        <div class="item" @click="goPage(9)">
            <div  class="registion-icon">
              <img src="@/assets/images/asset/search.png" alt="">
            </div>
            <div>搜索</div>
        </div>
      </div>
      <!-- <CommonSearch
        placeholder="请输入资产数字ID、资产名称、使用人"
        @searchFun="searchFun"
      ></CommonSearch> -->

    </div>
    <tab :line-width="2" active-color="rgb(80, 119, 185)" custom-bar-width="60px">
      <tab-item selected @on-item-click="handler">我创建的{{ createSum }}</tab-item>
      <tab-item @on-item-click="handler">我使用的{{ useSum }}</tab-item>
    </tab>
    <!-- <scroller
      class="scroll-list-home"
      lock-x
      height="calc(100% - 360px)"
      @on-scroll-bottom="onScrollBottom"
      ref="scrollerBottom"
      :scroll-bottom-offst="200"
    > -->
    <MeScroll
      ref="createMe"
      meScrollRef="createMe"
      v-show="userType == 1"
      @getList="getList"
      @resetList="resetList"
    >
      <div class="list" slot="list">
        <template v-if="list.length > 0">
          <div
            class="item"
            v-for="(item, index) in list"
            :key="index"
            @click="toLog(item.assetId)"
          >
            <div class="title">
              <span :class="`tag-${item.borrowState} tag`">{{
                getStatus(item.borrowState)
              }}</span>
              <span class="name">{{ item.assetName }}</span>
              <!-- <ion-icon name="chevron-forward-outline"></ion-icon> -->
              <x-icon class="more" type="ios-arrow-right"></x-icon>
            </div>
            <div class="label">
              <span class="title">资产数字ID</span>
              <span class="name">{{ item.assetCode }}</span>
            </div>
            <div class="label">
              <span class="title">资产分类</span>
              <span class="name">{{ item.className }}</span>
            </div>
            <div class="label">
              <span class="title">使用人</span>
              <span class="name">{{ item.useName }}</span>
            </div>
          </div>
        </template>
        <template v-else><no-data></no-data></template>
      </div>
    </MeScroll>
    <MeScroll ref="useMe" meScrollRef="useMe" v-show="userType == 2" @getList="getList" 
      @resetList="resetList">
      <div class="list" slot="list">
        <template v-if="useList.length > 0">
          <div
            class="item"
            v-for="(item, index) in useList"
            :key="index"
            @click="toLog(item.assetId)"
          >
            <div class="title">
              <span :class="`tag-${item.borrowState} tag`">{{
                getStatus(item.borrowState)
              }}</span>
              <span class="name">{{ item.assetName }}</span>
              <!-- <ion-icon name="chevron-forward-outline"></ion-icon> -->
              <x-icon class="more" type="ios-arrow-right"></x-icon>
            </div>
            <div class="label">
              <span class="title">资产数字ID</span>
              <span class="name">{{ item.assetCode }}</span>
            </div>
            <div class="label">
              <span class="title">资产分类</span>
              <span class="name">{{ item.className }}</span>
            </div>
            <div class="label">
              <span class="title">使用人</span>
              <span class="name">{{ item.useName }}</span>
            </div>
          </div>
        </template>

        <template v-else><no-data></no-data></template>
        <!-- <template v-if="total > list.length">
          <load-more tip="loading"></load-more>
        </template>
        <template v-else>
          <div class="load-complete">已加载全部</div>
        </template> -->
      </div></MeScroll
    >
    <!-- <div ref="mescroll" class="mescroll">
    </div> -->
    <!-- </scroller> -->
  </div>
</template>

<script>
import { Group, XInput, Tab, TabItem, Scroller, LoadMore, PopupPicker } from "vux";
import CommonSearch from "./components/search";
import MeScroll from "@/components/common/me-scroll";
import AssetApi from "@/api/asset.js";
import { mapActions } from "vuex";
export default {
  components: {
    MeScroll,
    Group,
    XInput,
    CommonSearch,
    Scroller,
    LoadMore,
    PopupPicker,
    Tab,
    TabItem,
  },
  data() {
    return {
      load: false,
      name: "",
      page: 1,
      pageSize: 5,
      total: 0,
      list: [],
      useList: [],
      receiveNumber: 0,
      userType: 1,
      createSum: 0,
      useSum: 0,
      mescroll: null,
    };
  },
  created() {
    this.getSign();
  },
  mounted() {
    this.useList = [];
    this.list = [];
    this.getList(1, 5, 2);
    this.getList(1, 5);
    this.findUnconfirmAsset();
  },
  methods: {
    ...mapActions("user", ["setSignInfo"]),
    handler(index) {
      this.userType = index + 1;
      this.useList = [];
      this.list = [];
      // this.load = false;
      this.getList(1, 5);
    },
    // 扫码查资产ID
    scanCode() {
      let _this = this;
      wx.scanQRCode({
        desc: "scanQRCode desc",
        needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
        success: function (res) {
          let strStartIndex = res.resultStr.lastIndexOf("=") + 1;
          let str = res.resultStr.substring(strStartIndex, res.resultStr.length);
          //  res.resultStr
          _this.$router.push({
            path: "/asset/log",
            query: {
              code: str,
            },
          });
          // 回调
          // var result = res.resultStr;//当needResult为1时返回处理结果
        },
        error: function (res) {
          if (res.errMsg.indexOf("function_not_exist") > 0) {
            alert("版本过低请升级");
          }
        },
      });
    },
    findUnconfirmAsset() {
      AssetApi.findUnconfirmAsset().then((res) => {
        if (res.code == "0000") {
          console.log(163, res.data);
          this.receiveNumber = res.data.order + res.data.transfer;
          if (this.receiveNumber > 99) {
            this.receiveNumber = "99+";
          }
        }
      });
    },
    getStatus(state) {
      let text = "未出借";
      switch (state) {
        case 0:
          text = "未出借";
          break;
        case 1:
          text = "出借待确认";
          break;
        case 2:
          text = "出借中";
          break;
        case 3:
          text = "归还待确认";
          break;
        default:
          text = "未出借";
          break;
      }
      return text;
    },
    resetList(){
      let _params = {
        userType: this.userType,
        // key: this.name,
        page: 1,
        pageSize: 5,
      };
      AssetApi.getAssetList(_params)
        .then((res) => {
          if (res.code == "0000") {
            if (this.userType == 2) {
              this.$refs.useMe.mescroll.endSuccess(res.data.records.length);
              this.useSum = res.data.total;
              this.useList = [...res.data.records]; //this.useList.concat(res.data.records);
            } else if (this.userType == 1) {
              this.$refs.createMe.mescroll.endSuccess(res.data.records.length);
              this.createSum = res.data.total;
              this.list = [...res.data.records]; //this.list.concat(res.data.records);
            }
          }
        })
        .finally((res) => {
          this.load = true;
        });
    },
    getList(num, size, type = null) {
      let _params = {
        userType: type ? type : this.userType,
        // key: this.name,
        page: num,
        pageSize: size
      };
      AssetApi.getAssetList(_params)
        .then((res) => {
          if (res.code == "0000") {
            if (this.userType == 2 || type == 2) {
              this.$refs.useMe.mescroll.endSuccess(res.data.records.length);
              this.useSum = res.data.total;
              this.useList = [...this.useList, ...res.data.records]; //this.useList.concat(res.data.records);
            } else if (this.userType == 1 && type == null) {
              this.$refs.createMe.mescroll.endSuccess(res.data.records.length);
              this.createSum = res.data.total;
              this.list = [...this.list, ...res.data.records]; //this.list.concat(res.data.records);
            }
          }
        })
        .finally((res) => {
          this.load = true;
        });
    },
    searchFun(name) {
      console.log(167, name);
      this.load = false;
      this.name = name;
      this.page = 1;
      this.list = [];
      this.useList = [];
      this.getList(1, 5);
      // 根据名称执行搜索操作
    },
    toLog(id) {
      this.$router.push({
        path: "log",
        query: {
          id: id,
          edit: true,
        },
      });
    },
    goPage(num) {
      let query = null;
      let pathMap = {
        1: "registration",
        2: "assetOpt",
        3: "assetOpt",
        4: "assetOpt",
        5: "receive",
        6: "inventory",
        7: "promissoryNote",
        8: "statistics",
        9: "search",
      };
      switch (num) {
        case 2:
          query = {
            type: "return",
          };
          break;
        case 3:
          query = {
            type: "lend",
          };
          break;
        case 4:
          query = {
            type: "transfer",
          };
          break;
        default:
          query = null;
          break;
      }
      this.$router.push({ path: pathMap[num], query });
    },
    getSign() {
      console.log(51, location);
      // let url = location.origin + location.pathname
      let url = location.href;
      this.glRequest.jsSign(url).then((res) => {
        if (res.code == "0000") {
          let _signData = JSON.parse(JSON.stringify(res.data));
          setTimeout(() => {
            this.setSignInfo(_signData);
            wx.config({
              beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
              debug: false, // 开启调试模÷式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: _signData.appId, // 必填，企业微信的corpID
              // corpid:_signData.appId, // 必填，企业微信的corpID
              // agentid:'1000051',// 必填，企业微信的应用id
              timestamp: _signData.timestamp, // 必填，生成签名的时间戳
              nonceStr: _signData.nonceStr, // 必填，生成签名的随机串
              signature: _signData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
              jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
            });
            wx.ready(function () {
              try {
                wx.onHistoryBack(function () {
                  return historyreturn();
                });
              } catch (e) {
                console.log(600, e);
              }
              // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            });
            wx.error(function (res) {
              console.log(600, res);
              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            });
            _signData = null;
          }, 200);
        }
      });
    },
  },
};
</script>
<style lang="less">

.home {
  .mescroll {
    -webkit-overflow-scrolling: touch;
    // overscroll-behavior-y: contain;
    overflow: auto;
    height: 608px;
  }
}
</style>
<style lang="less" scoped>
/deep/.top {
  .item-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0px;
    .item {
      width:25%;
      padding: 10px 0;
      position: relative;
      text-align: center;
      :nth-child(1) {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        overflow: hidden;
        img {
          height: 40px;
          width: 40px;
          border-radius: 0;
        }
      }
      :nth-child(2) {
        margin-top: 5px;
      }

      .num {
        position: absolute;
        top: -2px;
        right: 10px;
        display: inline-block;
        background: #ec6240;
        color: #fff;
        padding: 2px 4px;
        border-radius: 10px;
        font-size: 12px;
        min-width: 10px;
        text-align: center;
      }
    }
    .add-icon {
      background: rgb(106, 78, 246);
    }
    .registion-icon {
      background: rgb(29,67,202);
    }
    .return-icon {
      background: rgb(29, 166, 192);
    }
    .lend-icon {
      background: rgb(238, 95, 83);
    }
    .transfer-icon {
      background: rgb(238, 87, 60);
    }
    .receive-icon {
      background: rgb(227, 143, 65);
    }
    .inventory-icon {
      background: rgb(0, 158, 154);
    }
    .receipt-icon {
      background: rgb(36, 187, 114);
    }
    .scan-icon {
      background: rgb(214, 87, 146);
    }
    .statistics-icon {
      background: rgb(37, 108, 186);
    }
  }

  .count {
    margin: 10px 20px;
  }
}
.list {
  // height: auto;
  overflow-y: scroll;
  background: #f1f1f1;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  // overscroll-behavior-y: contain;
  .item {
    padding: 10px 15px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;

    .title {
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      .tag {
        color: #fff;
        position: relative;
        display: inline-block;
        padding: 0 3px 0 6px;
        font-size: 12px;
        line-height: 20px;
        height: 20px;
        border-radius: 4px 0 0 4px;
        &::after {
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          //   border-top: 8px solid red;
          content: "";
          position: absolute;
          top: 6px;
          right: -14px;
          width: 0;
          z-index: 99;
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
        }
      }
      .tag-1,
      .tag-0 {
        background: rgb(87, 184, 135);
        &::after {
          border-top: 8px solid rgb(87, 184, 135);
        }
      }
      .tag-2 {
        background: rgb(53, 120, 230);
        &::after {
          border-top: 8px solid rgb(53, 120, 230);
        }
      }
      .tag-3 {
        background: rgb(240, 153, 82);
        &::after {
          border-top: 8px solid rgb(240, 153, 82);
        }
      }
      .name {
        display: inline-block;
        margin-left: 20px;
        /* 单行显示省略号 */
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
      }
      .more {
        position: absolute;
        right: 0px;
      }
    }

    .label {
      display: flex;
      justify-content: flex-start;
      height: 30px;
      line-height: 30px;
      color: rgb(127, 127, 127);

      .title {
        display: inline-block;
        width: 100px;
      }
      .name {
        display: inline-block;
        // margin-left: 20px;
        /* 单行显示省略号 */
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
      }
    }
  }
}
.load-complete {
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #666;
}
.filter-group {
  margin-top: 10px;
}
</style>
